<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圍与連</title>
    <link rel="stylesheet" type="text/css" href="CSS/player.css">
    <script>
        var domain = 'future-of-go';
        var context = '/deepmind-media/alphago/sgf-files';
        var matches = [
            {
                'title': 'AlphaGo vs Ke Jie (Match 1)',
                'url': context + '/english/alphago-kejie/alphago_kejie_1.sgf'
            },
            {
                'title': 'AlphaGo vs Ke Jie (Match 2)',
                'url': context + '/english/alphago-kejie/alphago_kejie_2.sgf'
            },
            {
                'title': 'AlphaGo vs Ke Jie (Match 3)',
                'url': context + '/english/alphago-kejie/alphago_kejie_3.sgf'
            },
            {
                'title': 'Pair Go',
                'url': context + '/english/alphago-pairgo/alphago_pairgo.sgf'
            },
            {
                'title': 'Team Go',
                'url': context + '/english/alphago-teamgo/alphago_teamgo.sgf'
            },
        ];
    </script>
    <script src="./JS/wgo.js"></script>
    <script src="./JS/kifu.js"></script>
    <script src="./JS/sgfparser.js"></script>
    <script src="./JS/player.js"></script>
    <script src="./JS/basicplayer.js"></script>
    <script src="./JS/basicplayer.component.js"></script>
    <script src="./JS/basicplayer.infobox.js"></script>
    <script src="./JS/basicplayer.commentbox.js"></script>
    <script src="./JS/basicplayer.control.js"></script>
    <script src="./JS/player.editable.js"></script>
    <script src="./JS/scoremode.js"></script>
    <script src="./JS/player.permalink.js"></script>
    <script src="./JS/game-selector.js"></script>
    <script>
        var CONTAINER_ELEMENT_SELECTOR = 'body';
        var targetContainer = document.querySelector(CONTAINER_ELEMENT_SELECTOR);
        window.addEventListener('message', function (e) {
            var data = JSON.parse(e.data)
            if (!data.type === 'requestDimensions') return;
            var messageId = data.messageId
            var dimensions = {
                width: targetContainer.clientWidth,
                height: targetContainer.clientHeight + 10
            }
            window.parent.postMessage(JSON.stringify({
                type: 'requestDimensions',
                messageId: messageId,
                dimensions: dimensions
            }), '*');
        }, false);
    </script>
</head>
<body>
<div class="player wgo-player-main wgo-medium show wgo-player-main wgo-twocols wgo-large"
     data-wgo="/deepmind-media/alphago/sgf-files/english/alphago-kejie/alphago_kejie_3.sgf" id="wgo_0">
    <div class="wgo-player-left" style="display: none; height: 986px;">
        <div class="wgo-player-left-wrapper"></div>
    </div>
    <div class="wgo-player-center">
        <div class="wgo-player-top" style="display: block;">
            <div class="wgo-player-top-wrapper">
                <div class="wgo-player-control">
                    <div class="wgo-control-wrapper">
                        <div class="wgo-ctrlgroup wgo-ctrlgroup-left">
                            <button class="wgo-button wgo-button-menu" title="Menu"></button>
                        </div>
                        <div class="wgo-ctrlgroup wgo-ctrlgroup-right">
                            <button class="wgo-button wgo-button-about" title="About"></button>
                        </div>
                        <div class="wgo-ctrlgroup wgo-ctrlgroup-control">
                            <button class="wgo-button wgo-button-first wgo-disabled" title="First" disabled=""></button>
                            <button class="wgo-button wgo-button-multiprev wgo-disabled" title="10 moves back"
                                    disabled=""></button>
                            <button class="wgo-button wgo-button-previous wgo-disabled" title="Previous"
                                    disabled=""></button>
                            <form class="wgo-player-mn-wrapper"><input type="text" class="wgo-player-mn-value"></form>
                            <button class="wgo-button wgo-button-next" title="Next"></button>
                            <button class="wgo-button wgo-button-multinext" title="10 moves forward"></button>
                            <button class="wgo-button wgo-button-last" title="Last"></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="wgo-player-board" style="height: auto; padding-top: 0px;">
            <div class="wgo-board"
                 style="background-image: url(https://storage.googleapis.com/deepmind-media/alphago/wgo-files/wood1.jpg); width: 933px; height: 933px;">
                <canvas width="933" height="933" style="position: absolute; z-index: 100;"></canvas>
                <canvas width="933" height="933" style="position: absolute; z-index: 200;"></canvas>
                <canvas width="933" height="933" style="position: absolute; z-index: 300;"></canvas>
            </div>
        </div>
        <div class="wgo-player-bottom" style="display: none;">
            <div class="wgo-player-bottom-wrapper"></div>
        </div>
    </div>
    <div class="wgo-player-right" style="display: block; height: 986px;">
        <div class="wgo-player-right-wrapper">
            <div class="wgo-infobox">
                <div class="wgo-box-wrapper wgo-player-wrapper wgo-white">
                    <div class="wgo-box-title">Ke Jie</div>
                    <div class="wgo-player-info">
                        <div class="wgo-player-info-box-wrapper">
                            <div class="wgo-player-info-box">
                                <div class="wgo-player-info-title">Rank</div>
                                <div class="wgo-player-info-value">9p</div>
                            </div>
                        </div>
                        <div class="wgo-player-info-box-wrapper">
                            <div class="wgo-player-info-box">
                                <div class="wgo-player-info-title">Caps</div>
                                <div class="wgo-player-info-value">0</div>
                            </div>
                        </div>
                        <div class="wgo-player-info-box-wrapper">
                            <div class="wgo-player-info-box">
                                <div class="wgo-player-info-title">Time</div>
                                <div class="wgo-player-info-value">--:--</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="wgo-box-wrapper wgo-player-wrapper wgo-black">
                    <div class="wgo-box-title">AlphaGo</div>
                    <div class="wgo-player-info">
                        <div class="wgo-player-info-box-wrapper">
                            <div class="wgo-player-info-box">
                                <div class="wgo-player-info-title">Rank</div>
                                <div class="wgo-player-info-value">-</div>
                            </div>
                        </div>
                        <div class="wgo-player-info-box-wrapper">
                            <div class="wgo-player-info-box">
                                <div class="wgo-player-info-title">Caps</div>
                                <div class="wgo-player-info-value">0</div>
                            </div>
                        </div>
                        <div class="wgo-player-info-box-wrapper">
                            <div class="wgo-player-info-box">
                                <div class="wgo-player-info-title">Time</div>
                                <div class="wgo-player-info-value">--:--</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="wgo-commentbox wgo-gameinfo">
                <div class="wgo-box-wrapper wgo-comments-wrapper">
                    <div class="wgo-box-title">Game info</div>
                    <div class="wgo-comments-content">
                        <div class="wgo-help" style="display: none;"></div>
                        <div class="wgo-notification" style="display: none;"></div>
                        <div class="wgo-comment-text" style="display: block;">
                            <div class="wgo-info-list">
                                <div class="wgo-info-item"><span class="wgo-info-label">Event</span><span
                                        class="wgo-info-value">The Future of Go Summit, Match 3</span></div>
                                <div class="wgo-info-item"><span class="wgo-info-label">Date</span><span
                                        class="wgo-info-value">2017-05-27</span></div>
                                <div class="wgo-info-item"><span class="wgo-info-label">Black</span><span
                                        class="wgo-info-value">AlphaGo</span></div>
                                <div class="wgo-info-item"><span class="wgo-info-label">White</span><span
                                        class="wgo-info-value">Ke Jie (9p)</span></div>
                                <div class="wgo-info-item"><span class="wgo-info-label">Komi</span><span
                                        class="wgo-info-value">7.5</span></div>
                                <div class="wgo-info-item">
                                    <span class="wgo-info-label">Result</span>
                                    <span class="wgo-info-value">
                                        <!--a href="javascript: void(0)"
                                       onclick="this.parentNode.innerHTML = &#39;B+R&#39;"
                                       title="Click to show result.">show
                                        </a-->
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="choose-game" class="show">
    Choose Game :
    <select id="gameMode">
        <option value="./SGF/23.5.2017-Wuzhen-KeJie-Alphago.sgf">AlphaGo vs Ke Jie
            (Match 1)
        </option>
        <option value="./SGF/25.5.2017-Wuzhen-KeJie-Alphago.sgf">AlphaGo vs Ke Jie
            (Match 2)
        </option>
        <option value="./SGF/27.5.2017-Wuzhen-KeJie-Alphago.sgf" selected="true">
            AlphaGo vs Ke Jie (Match 3)
        </option>
    </select>
</div>

</body>
</html>